<template>
  <div class="box">
    <div class="comment-head">
      <i @click="goback" class="iconfont icon-fanhui"></i>
      <h2>评价</h2>
    </div>
    <div class="comment-cont">
      <div class="com-top">
        <div class="number">
          <span>评分</span>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang3"></i>
          <p>99.1%好评</p>
        </div>
        <div class="com-list">
          <ul>
            <li>全部（9999+）</li>
            <li>有图（4471）</li>
            <li>追评（1471）</li>
            <li>有效实用（134）</li>
            <li>手感好（41）</li>
            <li>售后好（1）</li>
            <li>差评（1）</li>
          </ul>
        </div>
        <button class="seen">更多<i class="iconfont icon-iconfontjiantou"></i></button>
        <button class="noseen">收起<i class="iconfont icon-jiantou-copy-copy-copy"></i></button>
      </div>
      <div class="comment-reply">
        <div class="topt">
          <img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/1796915383/O1CN01P5fkLz1pdSUueuWYo_!!0-item_pic.jpg_360x360Q90.jpg_.webp" alt="">
          <h2>嘻嘻**主</h2>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang3"></i>
          <p>2018.11.11 10:00</p>
        </div>
        <p class="tips">宝贝很好看，手感也好，很柔软，宝宝穿上很舒服</p>
        <img class="imgs" src="https://tgi1.jia.com/119/624/19624632.jpg" alt="">
        <div class="reply">
          <h3>店家回复:</h3>
          <p>感谢您的支持，我们会一如既往的全心问您服务，^-^</p>
        </div>
      </div>

      <div class="comment-reply">
        <div class="topt">
          <img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/1796915383/O1CN01P5fkLz1pdSUueuWYo_!!0-item_pic.jpg_360x360Q90.jpg_.webp" alt="">
          <h2>嘻嘻**主</h2>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang3"></i>
          <p>2018.11.11 10:00</p>
        </div>
        <p class="tips">这么柔软的衣服，宝宝一定很喜欢，嘿嘿</p>
        <img class="imgs" src="https://tgi1.jia.com/119/624/19624632.jpg" alt="">
        <div class="reply">
          <h3>店家回复:</h3>
          <p>谢谢您的支持，我们的面料均为100%纯棉，呵护宝宝的娇嫩肌肤是我们的职责，嘿嘿</p>
        </div>
      </div>

      <div class="comment-reply">
        <div class="topt">
          <img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/1796915383/O1CN01P5fkLz1pdSUueuWYo_!!0-item_pic.jpg_360x360Q90.jpg_.webp" alt="">
          <h2>嘻嘻**主</h2>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang5"></i>
          <i class="iconfont icon-shoucang3"></i>
          <p>2018.11.11 10:00</p>
        </div>
        <p class="tips">宝贝很好看，手感也好，很柔软，宝宝穿上很舒服</p>
        <img class="imgs" src="https://tgi1.jia.com/119/624/19624632.jpg" alt="">
        <div class="reply">
          <h3>店家回复:</h3>
          <p>感谢您的支持，我们会一如既往的全心问您服务，^-^</p>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  methods: {
    goback () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.comment-head {
  @include rect(100%, 0.42rem);
  background: rgba(235, 235, 235, 0.849);
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
    color: #444343;
  }
}
.comment-cont {
  @include rect(100%, 100%);
  overflow: auto;
  .com-top {
    @include rect(100%, auto);
    .number {
      @include flexbox();
      @include align-items();
      @include rect(94%, 0.24rem);
      margin-left: 3%;
      margin-top: 0.1rem;
      span {
        display: inline-block;
        padding-right: 0.1rem;
      }
      i {
        margin-left: 0.02rem;
        font-size: 0.15rem;
      }
      p {
        margin-left: 0.15rem;
      }
    }
    .com-list {
      @include rect(100%, 0.8rem);
      overflow: hidden;
      ul {
        margin-left: 0.05rem;
        li {
          float: left;
          padding: 0 0.05rem;
          height: 0.24rem;
          line-height: 0.24rem;
          background-color: rgba(255, 253, 253, 1);
          color: rgba(100, 100, 100, 1);
          font-size: 0.14rem;
          text-align: center;
          box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
          font-family: Arial;
          border: 1px solid rgba(170, 170, 170, 1);
          margin: 0.08rem 0;
          margin-left: 0.12rem;
        }
      }
    }
    button {
      @include rect(100%, 0.26rem);
      background: none;
      border: none;
      i {
        padding-left: 0.06rem;
      }
    }
    .noseen {
      display: none;
    }
  }
  .comment-reply {
    @include rect(100%, auto);
    border-top: 1px solid #cccccc;
    margin-bottom: 0.16rem;
    .topt {
      @include rect(92%, 0.4rem);
      margin-top: 0.15rem;
      margin-bottom: 0.1rem;
      margin-left: 4%;
      img {
        @include rect(0.4rem, 0.4rem);
        float: left;
        border-radius: 50%;
      }
      h2 {
        float: left;
        font-weight: 500;
        font-size: 0.14rem;
        margin: 0.02rem 0.3rem 0 0.1rem;
      }
      i {
        margin-left: -0.01rem;
      }
      p {
        width: 2rem;
        margin-left: 0.5rem;
      }
    }
    .tips {
      width: 92%;
      margin-left: 4%;
    }
    .imgs {
      @include rect(0.64rem, 0.64rem);
      margin-left: 0.13rem;
      margin-top: 0.1rem;
    }
    .reply {
      margin-top: 0.1rem;
      margin-left: 0.13rem;
      padding: 0.05rem;
      width: 3.46rem;
      line-height: 0.20rem;
      background-color: rgba(255, 253, 253, 1);
      color: rgba(100, 100, 100, 1);
      font-size: 0.14rem;
      text-align: left;
      box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
      font-family: Arial;
      border: 1px solid rgba(170, 170, 170, 1);
    }
  }
}
</style>
